<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<view :style="[{'height':height+'px'}]" style="background-color: transparent;"></view>
		<!-- #endif -->
		<view class="box-bg">
			<uni-nav-bar :border="false" left-icon="left" :dark="pattern" title="签到" @clickLeft="back" />
		</view>
		<ren-calendar ref='ren' :markDays='markDays' :open="true" :disabledAfter='true' @onDayClick='onDayClick'>
		</ren-calendar>

		<view class="example-body">
			经度:{{ lng }}<br>
			纬度:{{ lat }}<br>
			地址:{{ dizhi }}
		</view>
		<view>重新获取
			<uni-icons type="map-pin-ellipse" size="30" @click="gainDw"></uni-icons>
		</view>

	</view>
</template>

<script>
	import RenCalendar from './components/ren-calendar/ren-calendar.vue'
	export default {
		components: {
			RenCalendar
		},
		data() {
			return {
				curDate: '',
				markDays: [],
				beonTime: '2022-8-2 11:28:04',
				getoffTime: '2022-8-2 11:28:39',
				beonState: '出勤',
				getoffState: '签退',
				y: new Date().getFullYear(), // 年
				m: new Date().getMonth() + 1, // 月
				checkingIn_list: [],
				pattern: this.theme == 'light' ? false : true,
				height: this.StatusBar,
				lng: '',
				lat: '',
				dizhi: '',
			}
		},
		onReady() {
			console.log(this.pattern, 'pattern', 'this.theme', this.theme);
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.markDays.push(today);

			this.lng = uni.getStorageSync("location_infor").lng
			this.lat = uni.getStorageSync("location_infor").lat
			this.dizhi = uni.getStorageSync("location_infor").dizhi
		},
		mounted() {

		},
		methods: {
			gainDw() {
				uni.chooseLocation({
					success: (res) => {
						console.log('位置:', res);
						this.lng = res.longitude;
						this.lat = res.latitude;
						this.dizhi = res.address;
						this.$refs.ren.longitude = res.longitude;
						this.$refs.ren.latitude = res.latitude;
						this.$refs.ren.address = res.address;
					}
				});
			},
			onDayClick(data) {
				this.curDate = data.date;
			},
			back() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #fff;
	}

	.content {
		padding-top: 0rpx;

		.change {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			margin-top: 50rpx;

			color: #333;

			.item {
				background-color: #36c0e5;
				width: 180px;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10px;
				margin: 0 20px;
			}
		}
	}

	.time {
		padding: 12px 15px;
		color: #999;

		view {
			padding: 5px 0;
		}
	}
</style>